<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset=" UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="css/style.css" rel="stylesheet" th:href="${#servletContext.getContextPath()+'/css/style.css'}">
    <title>座位预约</title>
</head>
<body>
<div>
    <p align="center" style="margin-bottom:30px;font-weight:bold;">实验室预约在线选座</p>
    <ul class="showcase">
        <li>
            <div class="seat"></div>
            <small>可选</small>
        </li>

        <li>
            <div class="seat selected"></div>
            <small>已选</small>
        </li>

        <li>
            <div class="seat occupied"></div>
            <small>不可选</small>
        </li>
    </ul>
    <div class="screen"></div>
    <div th:if="${session.seatUser ne null}">
        <ul class="showcase">
            <li>
                <b>座位号:</b> <span th:text="${session.seatUser.seatName}">A1</span>
            </li>
            <li>
                <b>开始时间:</b> <span th:text="${#dates.format(session.seatUser.beginTime,'yyyy-MM-dd HH:mm:ss')}">2019-01-01 12:11:05</span>
            </li>
        </ul>

        <ul class="showcase">
            <li>
                <b>用户名:</b> <span th:text="${session.seatUser.userName}">张三</span>
            </li>
            <li>
                <b>到期时间:</b> <span th:text="${#dates.format(endTime,'yyyy-MM-dd HH:mm:ss')}">2019-01-01 12:11:05</span>
            </li>
        </ul>
    </div>
    <div class="row" th:each="list :${tempList}">
        <div class="seat" onclick="select(this)"
             th:attr="val=${item.seatName}"
             th:classappend="${item.status eq 'occupied'}?'occupied':''"
             th:each="item:${list}"
             th:text="${item.userName != 'null'? item.userName :item.seatName}"
             val="A1">
            A1
        </div>
    </div>
    <div class="showcase" style="margin-top: 10px">
        <label for="userName">姓名</label> <input id="userName" type="text">
    </div>
    <div class="showcase">
        <label for="useTime">使用时长</label>
        <select id="useTime" name="useTime">
            <option selected value="1">1小时</option>
            <option value="2">2小时</option>
            <option value="3">3小时</option>
            <option value="4">4小时</option>
            <option value="5">5小时</option>
            <option value="6">6小时</option>
        </select>
        <button onclick="seatSubmit()">提交</button>
        <button onclick="seatExit()" th:if="${session.seatUser ne null}">退出</button>
    </div>
    <div>
        <b style="color: red">温馨提示!</b>
        <p>请使用期限结束前刷新网页进行延续座位!</p>
        <p>期限结束前没有访问页面座位自动过期</p>
    </div>
</div>

<script src="js/jquery-3.5.1.js" th:src="${#servletContext.getContextPath()+'/js/jquery-3.5.1.js'}"></script>

<script>
    function select(e) {
        if ($(e).attr('class').indexOf('occupied') <= 0) {
            $(e).toggleClass('selected')
        }
    }

    function seatSubmit() {
        var temp = {}
        $('.seat').each(function (index, value) {
            if ($(value).attr('class').indexOf('selected') > 0) {
                if ($(value).attr('val') !== undefined)
                    temp.data = $(value).attr('val')
            }
        })
        if (temp.data == null) {
            alert('请选择座位')
            return false
        }
        if ($('#userName').val().length === 0) {
            alert('请输入姓名')
            return false
        }

        temp.useTime = $('#useTime').val()
        temp.userName = $('#userName').val().substr(0, 3)
        $.ajax({
            type: 'post',
            url: '/reserve/processServlet',
            data: temp,
            dataType: 'json',
            success: function (result) {
                if (result.code != 0) {
                    alert(result.msg)
                } else {
                    alert('选座成功!请离开时手动退出')
                }
                location.reload()
            }, error: function (error) {
                alert('预约失败,请重试!')
                location.reload()
            }
        })

    }

    function seatExit() {
        $.ajax({
            type: 'get',
            url: '/reserve/exit',
            dataType: 'json',
            success: function (result) {
                if (result.code != 0) {
                    alert(result.msg)
                } else {
                    alert('退出成功!')
                }
                location.reload()
            }, error: function (error) {
                alert('退出失败,请重试!')
                location.reload()
            }
        })
    }
</script>
</body>
</html>
